Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Komponen Interaktif Bootstrap

Bootstrap tidak hanya menyediakan komponen tampilan (UI), tetapi juga komponen interaktif yang membuat website menjadi lebih dinamis dan menarik. Komponen ini menggunakan JavaScript Bootstrap sehingga dapat merespon aksi pengguna seperti klik, hover, atau scroll.

Beberapa komponen interaktif yang sering digunakan antara lain:

  • Modal
  • Carousel / Slider
  • Collapse
  • Tooltip
  • Accordion

Komponen ini sangat berguna untuk meningkatkan user experience (UX) pada website.

1. Modal

Modal adalah jendela pop-up yang muncul di atas halaman utama untuk menampilkan informasi tanpa berpindah halaman.

Biasanya digunakan untuk:

  • form login
  • konfirmasi aksi
  • detail informasi

Contoh penggunaan modal:

 
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Buka Modal
</button>

<div class="modal fade" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h5 class="modal-title">Judul Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">
Ini adalah isi modal
</div>

<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
</div>

</div>
</div>
</div>
 

2. Carousel / Slider

Carousel digunakan untuk menampilkan beberapa konten (biasanya gambar) secara bergantian.

Biasanya digunakan pada:

  • banner website
  • landing page
  • galeri

Contoh carousel:

 
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">

<div class="carousel-item active">
<img src="img1.jpg" class="d-block w-100">
</div>

<div class="carousel-item">
<img src="img2.jpg" class="d-block w-100">
</div>

</div>

<button class="carousel-control-prev" data-bs-target="#carouselExample" data-bs-slide="prev">
</button>

<button class="carousel-control-next" data-bs-target="#carouselExample" data-bs-slide="next">
</button>
</div>
 

3. Collapse

Collapse digunakan untuk menyembunyikan dan menampilkan konten secara dinamis.

Biasanya digunakan untuk:

  • menu mobile
  • FAQ
  • detail tambahan

Contoh collapse:

 
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">
Tampilkan
</button>

<div class="collapse" id="demo">
<div class="card card-body">
Konten tersembunyi
</div>
</div>
 

4. Tooltip

Tooltip adalah teks kecil yang muncul ketika pengguna mengarahkan kursor ke suatu elemen.

Biasanya digunakan untuk:

  • memberikan informasi tambahan
  • petunjuk penggunaan

Contoh tooltip:

 
<button class="btn btn-secondary" data-bs-toggle="tooltip" title="Ini tooltip">
Hover saya
</button>
 

Catatan:

Tooltip perlu diaktifkan dengan JavaScript:

 
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el))
</script>
 

5. Accordion

Accordion digunakan untuk menampilkan konten dalam bentuk daftar yang dapat dibuka dan ditutup satu per satu.

Biasanya digunakan untuk:

  • FAQ
  • daftar informasi
  • menu detail

Contoh accordion:

 
<div class="accordion" id="accordionExample">

<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#item1">
Pertanyaan 1
</button>
</h2>

<div id="item1" class="accordion-collapse collapse show">
<div class="accordion-body">
Jawaban 1
</div>
</div>
</div>

</div>
 

Kesimpulan

Komponen interaktif Bootstrap seperti modal, carousel, collapse, tooltip, dan accordion memungkinkan developer untuk membuat website yang lebih dinamis dan interaktif tanpa harus menulis JavaScript dari awal. Dengan memanfaatkan komponen ini, pengalaman pengguna menjadi lebih baik karena interaksi menjadi lebih mudah, informatif, dan menarik. Pemahaman komponen interaktif ini sangat penting untuk membangun website modern dan profesional.

Report Error